<template>
  <div>
    <a-form-item field="nick" :label="title">
      <a-input
        v-model="searchForm.nick"
        placeholder="请输入群名称"
        allow-clear
        @change="handleSearch"
      />
      <a-button type="primary" @click="handleSearch">查找</a-button>
    </a-form-item>
    <a-table
      row-key="wxid"
      :data="groupList"
      :columns="columns"
      :loading="loading"
      :pagination="{
        total: count,
        current: current,
        pageSize: pageSize,
      }"
      :row-selection="{
        type: 'checkbox',
        onlyCurrent: false,
      }"
      v-model:selectedKeys="selectedKeys"
      @page-change="handlePageChange"
      @page-size-change="handlePageSizeChange"
      @select ="handleselect"
    >
      <template #wxinfo="{ record }">
        <a-row>
          <a-col :span="6" style="text-align: center">
            <a-avatar
              :trigger-icon-style="{ color: '#3491FA' }"
              @click="handleGetInfo(record)"
            >
              <img alt="avatar" :src="record.avatarMinUrl" />
              <template #trigger-icon>
                <icon-group />
              </template>
            </a-avatar>
          </a-col>
          <a-col :span="18">
            <div>群名：{{ record.nick }}</div>
            <div>wxid: {{ record.wxid }}</div>
            <div>成员数：{{ record.memberCount }}</div>
          </a-col>
        </a-row>
      </template>
    </a-table>
  </div>
</template>

<script lang="ts" setup>
  import {
    ref,
    reactive,
    watch,
    defineProps,
    defineEmits,
    defineExpose,
    h,
  } from 'vue';
  import { TableColumnData } from '@arco-design/web-vue';
  import { getGroupList, getGroupInfo } from '@/api/weixin';

  const props = defineProps<{
    title: string;
    selectedWxid: string;
  }>();

  const emit = defineEmits(['update:selectedKeys']);

  // 搜索表单
  const searchForm = reactive({ nick: '' });

  // 表格数据
  const groupList = ref([]);
  const selectedKeys = ref<string[]>([]);
  const current = ref(1);
  const pageSize = ref(5);
  const count = ref(0);
  const loading = ref(false);

  // 表头定义
  const columns: TableColumnData[] = [
    {
      title: '基本信息',
      slotName: 'wxinfo',
    },
  ];

  // 获取群列表
  const fetchGroupList = async () => {
    loading.value = true;
    try {
      const res: any = await getGroupList(props.selectedWxid, {
        field: { nick: searchForm.nick },
        page: current.value,
        pageSize: pageSize.value,
      });
      if (res.code === 20000) {
        count.value = res.data.count;
        groupList.value = res.data.list;
      }
    } catch (error) {
      console.error('获取群列表失败:', error);
    } finally {
      loading.value = false;
    }
  };

  // 分页事件
  const handlePageChange = async (page: number) => {
    current.value = page;
    await fetchGroupList();
  };

  const handlePageSizeChange = async (size: number) => {
    pageSize.value = size;
    current.value = 1;
    await fetchGroupList();
  };
  const handleselect = (keys: string[],key:string,record:any) => {
    selectedKeys.value = keys;
    emit('update:selectedKeys', keys);
  };

  // 搜索
  const handleSearch = () => {
    current.value = 1;
    fetchGroupList();
  };

  // 群信息详情
  const handleGetInfo = async (record: any) => {
    try {
      const res: any = await getGroupInfo({
        mywxid: props.selectedWxid,
        wxid: record.wxid,
      });
      if (res.code === 20000) {
        await fetchGroupList();
      }
    } catch (error) {
      console.error('获取群信息失败:', error);
    }
  };

  // 监听 selectedWxid 变化
  watch(
    () => props.selectedWxid,
    () => {
      if (props.selectedWxid) {
        fetchGroupList();
      }
    },
    { immediate: true }
  );  

  // 暴露方法供父组件调用
  defineExpose({ fetchGroupList });
</script>
